<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>canvas基础</title>
    <style>
        /*不能在里面设置宽高*/
        canvas{

            border: 1px solid black;
        }
    </style>
</head>
<body>
<!--1.canvas设置好宽高-->
<!--2.获取画笔对象-->
<!--3.使用canvas api-->
<script>
    //一个画笔一个画布，不能一个画布的画笔去画另一个画布
    //1获取/创建 canvas对象(画布)
    const canvas=document.createElement('canvas');
    document.body.append(canvas);
    //这个宽高不能用px设置，否则效果会坏
    canvas.width=600
    canvas.height=400
    //2获取context(画笔对象)
    const ctx=canvas.getContext('2d')
    //3画出自己想要的图形
    //画一个方形,(x,y,width,height)
    ctx.fillStyle = "green";
    ctx.fillRect(0,0,150,100)

</script>
</body>


</html>